<template>
  <div class="user-order" v-if="userInfo.userLevel!=0">
    <h3 class="order__title">
      <p class="order__title__title">会员详情</p>
    </h3>
    <div class="order__bd">
      <div v-for="(item, idx) in orderList" :key="idx" class="order__bd__item" :class="{'two':idx>1}" @click="go(item.type)">
        <!--        <span class="number">{{ item.number }}</span>-->
        <span class="name">{{ item.name }}</span>

        <span class="number">{{ item.count || 0 }}</span>

      </div>
    </div>
  </div>
</template>

<script>
import { getDatas } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      orderList: [
        {
          number: 24,
          name: '团队总人数',
          count: '0',
          type: 1
        },
        // {
        //   number: 56453.37,
        //   name: '粉丝订单',
        //   count: '0',
        //   type: 2
        // },
        {
          number: 12323.4,
          name: '总采购补贴',
          count: '0',
          type: 3
        },
        {
          number: 12323.4,
          name: '推荐总收益',
          count: '0',
          type: 5
        },
        { number: 56453.37, name: '总积分赠送', count: '0', type: 4 }
      ]
    }
  },
  created() {
    this.$toast.loading('加载中')
    this.init()
  },
  methods: {
    init() {
      getDatas().then(res => {
        console.log(res)
        this.orderList.forEach((item, index) => {
          if (index === 0) {
            console.log(res.map.fansNum)

            item.count = res.map.fansNum
          } 
          // else if (index === 1) {
          //   console.log(res.map.fansOrderNum)

          //   item.count = res.map.fansOrderNum
          // } 
          else if (index === 1) {
            console.log(res.map.userCash)

            item.count = res.map.userCash
          } else if (index === 2) {
            console.log(res.map.userPoint)

            item.count = res.map.userRecommendCash
          } else {
            console.log(res.map.userPoint)

            item.count = res.map.userPoint
          }
          this.$set(this.orderList, index, item)
        })
        this.$toast.clear()
      })
    },
    go(type) {
      // 开发中
      let url = ''
      if (type === 1) {
        url = '/fans'
      } else if (type === 2) {
        url = '/fansOrder'
      } else if (type === 3) {
        url = '/income?type=1'
      } else if (type === 4) {
        url = '/income?type=2'
      } else {
        url = '/income?type=3'
      }

      this.$router.push(url)
    }
  }
}
</script>

<style>
:root {
  --user-order-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
}
</style>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.two{
  margin-top: 50px !important;
}
.user-order {
  width: 702px;
  // height: 268px;
  padding-bottom: 50px;
  margin: 0 auto;
  box-shadow: var(
    --user-order-shadow
  ); // 这里使用 css 函数，是为了避免旧版本 vue-cli 依赖的 css 压缩工具（mini-css-extract-plugin）导致的 bug
  border-radius: 24px;
  margin-top: 42px;
  .order__title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 34px 24px 34px 34px;
    .order__title__title {
      font-size: 36px;
      font-weight: 500;
      color: $black;
    }
    .order__title__navigate {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 6px;
      span {
        font-size: 26px;
        font-family: PingFangSC;
        font-weight: 400;
        color: $gray;
        margin-right: 10px;
      }
    }
  }
  .order__bd {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24px;
    .order__bd__item {
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 14px;
      .name {
        font-size: 26px;
        color: $gray;
        // margin-top: 16px;

      }
      .number{
        margin-top: 25px;
      }
    }
  }
}
</style>
